<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src=" https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
        }
    </style>
</head>

<body>
    <button>按钮</button>
    <div id="box"></div>
    <script>
        $('#box').click(function () {

            // Velocity(dom,{width:1000},{duration:3000})
            // 参数1 - 元素最终状态
            // 参数2  动画持续时间
            // 参数3  动画效果 linear 线性    swing 缓冲
            // 参数4 回调函数--动画结束的回调函数
            // $('#box').animate({ width: 300, height: 200, left: 100 }, 1000, 'swing', function () {
            //     console.log('动画结束');
            // })


            // 显示
            // / $('div').show('毫秒', '速度', '回调函数')
            // $('#box').show(1000, 'linear', function () {
            //     console.log('我显示完毕')
            // })

            // $('#box').hide(1000, 'linear', function () {
            //     console.log('我显示完毕')
            // }).show(2000).toggle(2000)


            // delay(5000 推迟5000秒 再执行下一个动画
            $('#box').slideUp(1000).delay(5000)
            $('#box').slideDown(2000)
            $('#box').slideToggle(2000)


            // $('#box').fadeOut(1000)
            // $('#box').fadeIn(2000)
            // $('#box').fadeToggle(2000)
        })

        $('button').click(function () {

            // 停止正在执行的动画，开始下一个动画
            // $('#box').stop()

            // 就停止再当前状态，清空队列里的动画
            // $('#box').stop(true)


            // $('div').finish() // 停止在动画结束状态

        })
    </script>

</body>

</html>